<template>
  <!--模板-->
  操作按钮，基于el-button二次开发，支持快捷键，alt + a：添加按钮被单击。快捷键可设置
  <hr>
  <nf-button
    v-bind="buttonMeta"
    :componentKind="componentKind"
    :moduleId="moduleId"
  >
  </nf-button><br><br>
  <el-button type="" @click="click1">设置选择</el-button>
  <el-button type="" @click="click2">清除选择</el-button><br>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { ElButton } from 'element-plus'
  import { nfButton } from  '../../../lib/main'
  import _buttonMeta from './button.json'

  import form from '../form/10-form.vue'
  import list from '../grid/10-grid.vue'

  export default defineComponent({
    name: 'nf-ui-elp-button',
    components: {
      ElButton,
      nfButton
    },
    props: {
    },
    setup(props, context) {

      const buttonMeta = reactive(_buttonMeta)

      buttonMeta.events = {
        deleteClick: (id, meta) => {
          console.log('按了删除按钮：', id, meta)
          return true
        }
      }

      // 弹窗打开的组件的字典
      const componentKind = {
        form,
        list
      }

      const moduleId = new Date().valueOf()

      const click1 = () => {
        buttonMeta.dataId = '123'
      }
      const click2 = () => {
        buttonMeta.dataId = ''
      }
      return {
        buttonMeta,
        componentKind,
        moduleId,
        click1,
        click2
      }
    }
  })
</script>